﻿@{
    ViewBag.Title = "Demon1";
    Layout = "~/Views/Shared/_demo.cshtml";
}
<style>
    fieldset { padding: 10px; }
    table { width: 500px; }
    h2 { color: #445566;  }
    h3 { color: #336699; font-size:14px;}
    input { background-color: #eee; padding: 5px; }
    tfoot td { padding-top: 20px; }
    button { font-size: 16px; padding: 5px 10px; }
    sub { color: Red; }
</style>
<fieldset>
    <table>
        <thead>
            <tr>
                <td>
                    <h2>
                        Registration
                    </h2>
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <h3>
                        Account ID<sub>*</sub></h3>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" id="AccountID" />
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    <h3>
                        Password<sub>*</sub></h3>
                </td>
                <td>
                    <h3>
                        Confirm Password<sub>*</sub></h3>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="password" id="Password" />
                </td>
                <td>
                    <input type="password" id="dPassword" />
                </td>
            </tr>
            <tr>
                <td>
                    <h3>
                        Phone</h3>
                </td>
                <td>
                    <h3>
                        Email</h3>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" id="Phone" />
                </td>
                <td>
                    <input type="text" id="Email" />
                </td>
            </tr>
            <tr>
                <td>
                    <h3>
                        Frist Name</h3>
                </td>
                <td>
                    <h3>
                        Last Name</h3>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" id="FristName" />
                </td>
                <td>
                    <input type="text" id="LastName" />
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>
                    <button id="submit">
                        submit</button>
                </td>
            </tr>
        </tfoot>
    </table>
</fieldset>
<script>
    $(document).ready(function () {
        $("#submit").live("click", function () {
            var id = $("#AccountID").val();
            var pwd = $("#Password").val();
            var dpwd = $("#dPassword").val();
            var fn = $("#FristName").val();
            var ln = $("#LastName").val();
            var phone = $("#Phone").val();
            var email = $("#Email").val();

            if (id == "") {
                alert("Account cannot be null!");
                $("#AccountID").focus();
                return
            }

            if (pwd == "") {
                alert("Password cannot be null!");
                $("#Password").focus();
                return
            }
            if (dpwd == "") {
                alert("Confirm Password cannot be null!");
                $("#dPassword").focus();
                return
            }
            if (pwd !== dpwd) {
                alert("Confirm Password is not as same as Password!");
                $("#dPassword").focus();
                return
            }
            if (phone != "") {
                var re = /^\d+$/;
                if (!re.test(phone)) {
                    alert("phone should be number");
                }
                $("#Phone").focus();
                return
            }
            alert("success!")
        });
    }); 
</script>
